<template>
  <div class="key-personnel-container">
    <EmptyIndex :isEmpty="getData?.length">
      <template #listCon>
        <ul class="gs-details">
          <li
            v-for="(item, index) in getData"
            :key="index"
            @click.prevent="handleBusinessRole(item.name)"
          >
            <div class="left-info">
              <div class="left-info-t">
                <div class="order-number">{{ index + 1 }}</div>
                <div class="left-info-t-gs">
                  <h3>{{ item.name }}</h3>
                  <p>
                    <span>职位：{{ item.typeJoin?.join("、") }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="right-icon">
              <em class="iconfont icon-youjiantou" />
            </div>
          </li>
        </ul>
      </template>
    </EmptyIndex>
  </div>
</template>

<script>
import EmptyIndex from "@/components/empty";
import { jumpPage, Toast } from "@/utils";
export default {
  name: "KeyPersonnel",
  components: {
    EmptyIndex,
  },
  props: {
    dataInfo: {
      type: Object,
    },
    type: String,
  },
  watch: {
    type(newVal) {
      //需要等待 this.getData ，如果没有数据，提示
      setTimeout(() => {
        if (newVal === "keyPersonnel" && !this.getData?.length) {
          Toast.fail("数据未找到");
        }
      }, 500);
    },
  },
  computed: {
    /**
     * 获取人员数据信息
     */
    getData() {
      const { staffList = {} } = this.dataInfo || {};
      return staffList?.result;
    },
  },
  methods: {
    /**
     * 进入商业角色页面
     * @param {*} humanName 人名
     */
    handleBusinessRole(humanName) {
      jumpPage(this, "BusinessRole", {
        companyName: this.$route.query.companyName,
        humanName,
      });
    },
  },
};
</script>

<style lang="less">
@import url("~@/assets/styles/resetComponentStyle.less");
</style>